<?php
namespace control;
// 设备看板
class equipmentKanbanClass extends adIndexClass
{
    private const page = 'equipmentKanban';
    private const title = '设备看板';
    /*返回网页*/
    public function home()
    {
        $version = version;
        //设备报修
        $equipment_repair = find(array(
            "table"=>"equipment_repair",
            "field"=>"eqid,repairerTime,state,updateTime",
            "where"=>" coid = '".self::$coid."' and state in ('已登记','已派工') order by time desc limit 20 "
        ));
        $li = "";
        foreach ((array)$equipment_repair['array'] as $k=>$array){
            $equipment = query("equipment"," id = '$array[eqid]' ","name");
            $responseDuration = floor((strtotime($array['updateTime'])-strtotime($array['repairerTime']))%86400/60);
            $duration = $array['state']=='已派工'?round($responseDuration/60*100,2):100;
            $responseTime = $array['state']=='已派工'?date("H:i",strtotime($array['updateTime'])):'-';
            $li .= "<li>
                    <p>".($k+1)." {$equipment['name']}</p>
                    <p>".date("H:i",strtotime($array['repairerTime']))."</p>
                    <p>{$array['state']}</p>
                    <p>".$responseTime."</p>
                    <p><span class='duration' style='width: {$duration}%'></span></p>
                </li>";
        }
        $style = count((array)$equipment_repair['array'])<7?" style='display: none;' ":"";
        $equipmentRepair = "
            <div class='yield' id='repair_box'>
                <ul id='comment1'>
                    {$li}
                </ul>
                <ul id='comment2' {$style}></ul>
            </div>
            ";
        //设备巡检保养
        $equipment = find(array(
            "table"=>"equipment",
            "field"=>"id,name,state",
            "where"=>" coid = '".self::$coid."' order by time asc limit 20 "
        ));
        $li = "";
        foreach ((array)$equipment['array'] as $k=>$array){
            $inspection = query(
                "equipment_patrol",
                " coid = '".self::$coid."' and eqid = '$array[id]' and type = '设备巡检' order by lastDate desc ",
                "lastDate,state"
            );
            $inspectionStyle = $inspection['state']=='异常'?" style='color:#c21e1e;' ":"";
            $maintain = query(
                "equipment_patrol",
                " coid = '".self::$coid."' and eqid = '$array[id]' and type = '设备保养' order by lastDate desc ",
                "lastDate,state"
            );
            $maintainStyle = $maintain['state']=='异常'?" style='color:#c21e1e;' ":"";
            $state = "正常";
            $stateStyle = "";
            if(!empty($inspectionStyle) || !empty($maintainStyle)){
                $stateStyle = " style='color:#c21e1e;' ";
                $state = "异常";
            }
            $li .= "<li>
                    <p>".($k+1). "</p>
                    <p>{$array['name']}</p>
                    <p><span $stateStyle>{$state}</span></p>
                    <p><span $inspectionStyle>".(empty($inspection['lastDate'])?'-':date("m-d",strtotime($inspection['lastDate'])))."</span></p>
                    <p><span $maintainStyle>".(empty($maintain['lastDate'])?'-':date("m-d",strtotime($maintain['lastDate'])))."</span></p>
                </li>";
        }
        $style = count((array)$equipment['array'])<13?" style='display: none;' ":"";
        $equipmentMaintain = "
            <div class='yield' id='maintain_box'>
                <ul id='comment3'>
                    {$li}
                </ul>
                <ul id='comment4' $style></ul>
            </div>
            ";
        //模具寿命与状态
        $mold = find(array(
            "table"=>"mold",
            "field"=>"id,name,state,mouldLife,mouldRemainingLife",
            "where"=>" coid = '".self::$coid."' order by time asc limit 20 "
        ));
        $li = "";
        foreach ((array)$mold['array'] as $k=>$array){
            $li .= "<li>
                    <p>".($k+1)."</p>
                    <p>{$array['name']}</p>
                    <p><span>正常</span></p>
                    <p><span>{$array['mouldLife']}</span></p>
                    <p><span>{$array['mouldRemainingLife']}</span></p>
                </li>";
        }
        $style = count((array)$mold['array'])<13?" style='display: none;' ":"";
        $equipmentMould = "
            <div class='yield' id='mould_box'>
                <ul id='comment5'>
                    {$li}
                </ul>
                <ul id='comment6' $style></ul>
            </div>
            ";
        $logoConrol = img('logoConrolImg');
        $html = <<<EOT
    <div id="base" class="">
      <!-- Unnamed (矩形) -->
      <div id="u0" class="ax_default box_1">
        <div id="u0_div" class=""></div>
        <div id="u0_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
      <!-- Unnamed (图像) -->
      <div id="u1" class="ax_default _图片_">
        <img id="u1_img" class="img " src="{$this->root}img/equipmentBoard/equipmentBoard.jpg?v=$version">
        <div id="u1_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (SVG) -->
      <div id="u2" class="ax_default _图片_">
        <img id="u2_img" class="img " src="$logoConrol">
        <div id="u2_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u3" class="ax_default _一级标题">
        <div id="u3_div" class=""></div>
        <div id="u3_text" class="text ">
          <p><span style="text-decoration:none;">设备看板</span></p>
        </div>
      </div>
      
      <!-- Unnamed (SVG) -->
      <div id="ufull" class="ax_default _图片_">
        <a href="{$this->root}control/adIndex.html?cla=equipmentKanban&fun=home" target="_blank"><img id="ufull_img" class="img " src="{$this->root}img/svg/full_screen.svg?v=$version"></a>
        <div id="ufull_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u4" class="ax_default box_1">
        <div id="u4_div" class=""></div>
        <div id="u4_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u5" class="ax_default _三级标题">
        <div id="u5_div" class=""></div>
        <div id="u5_text" class="text ">
          <p><span style="text-decoration:none;">现场监控</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u6" class="ax_default box_1">
        <div id="u6_div" class=""></div>
        <div id="u6_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u7" class="ax_default _三级标题">
        <div id="u7_div" class=""></div>
        <div id="u7_text" class="text ">
          <p><span style="text-decoration:none;">设备报修</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u8" class="ax_default box_1">
        <div id="u8_div" class=""></div>
        <div id="u8_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u9" class="ax_default _三级标题">
        <div id="u9_div" class=""></div>
        <div id="u9_text" class="text ">
          <p><span style="text-decoration:none;">设备巡检保养</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u10" class="ax_default box_1">
        <div id="u10_div" class=""></div>
        <div id="u10_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u11" class="ax_default _三级标题">
        <div id="u11_div" class=""></div>
        <div id="u11_text" class="text ">
          <p><span style="text-decoration:none;">设备故障分布</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u12" class="ax_default box_1">
        <div id="u12_div" class=""></div>
        <div id="u12_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u13" class="ax_default _三级标题">
        <div id="u13_div" class=""></div>
        <div id="u13_text" class="text ">
          <p><span style="text-decoration:none;">配件周转率</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u14" class="ax_default box_1">
        <div id="u14_div" class=""></div>
        <div id="u14_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u15" class="ax_default _三级标题">
        <div id="u15_div" class=""></div>
        <div id="u15_text" class="text ">
          <p><span style="text-decoration:none;">模具寿命与状态</span></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u16" class="ax_default box_1">
        <img id="u16_img" class="img " src="{$this->root}img/equipmentBoard/u16.svg?v=$version">
        <div id="u16_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u17" class="ax_default line-new">
        <img id="u17_img" class="img " src="{$this->root}img/equipmentBoard/u17.svg?v=$version">
        <div id="u17_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u18" class="ax_default box_1">
        <img id="u18_img" class="img " src="{$this->root}img/equipmentBoard/u18.svg?v=$version">
        <div id="u18_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (形状) -->
      <div id="u19" class="ax_default line-new">
        <img id="u19_img" class="img " src="{$this->root}img/equipmentBoard/u19.svg?v=$version">
        <div id="u19_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (动态面板) -->
      <div id="u20" class="ax_default">
        
        
        <div id="u20_state0" class="panel_state" data-label="State1" style="visibility: inherit; position: relative;">  
          <div id="u20_state0_content" class="panel_state_content">
            <!-- time (矩形) -->
            <div id="u21" class="ax_default _三级标题" data-label="time">
              <div id="u21_div" class=""></div>
              <div id="u21_text" class="text " style="visibility: inherit;">
                <p id="cache0"><span style="text-decoration:none;" id="showTime">2021-01-11 09:41:00 MONDAY</span></p>
              </div>
            </div>
          </div>
        </div>
    </div>

      <!-- Unnamed (形状) -->
      <div id="u23" class="ax_default line-new">
        <img id="u23_img" class="img " src="{$this->root}img/equipmentBoard/u23.svg?v=$version">
        <div id="u23_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u24" class="ax_default line-new">
        <img id="u24_img" class="img " src="{$this->root}img/equipmentBoard/u24.svg?v=$version">
        <div id="u24_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u25" class="ax_default line-new">
        <img id="u25_img" class="img " src="{$this->root}img/equipmentBoard/u24.svg?v=$version">
        <div id="u25_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (垂直线) -->
      <div id="u26" class="ax_default line-new">
        <img id="u26_img" class="img " src="{$this->root}img/equipmentBoard/u26.svg?v=$version">
        <div id="u26_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u27" class="ax_default line-new">
        <img id="u27_img" class="img " src="{$this->root}img/equipmentBoard/u27.svg?v=$version">
        <div id="u27_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u28" class="ax_default box_1">
        <div id="u28_div" class=""></div>
        <div id="u28_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u29" class="ax_default line-new">
        <img id="u29_img" class="img " src="{$this->root}img/equipmentBoard/u27.svg?v=$version">
        <div id="u29_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u30" class="ax_default box_1">
        <div id="u30_div" class=""></div>
        <div id="u30_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u31" class="ax_default line-new">
        <img id="u31_img" class="img " src="{$this->root}img/equipmentBoard/u31.svg?v=$version">
        <div id="u31_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u32" class="ax_default box_1">
        <div id="u32_div" class=""></div>
        <div id="u32_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u33" class="ax_default line-new">
        <img id="u33_img" class="img " src="{$this->root}img/equipmentBoard/u27.svg?v=$version">
        <div id="u33_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u34" class="ax_default box_1">
        <div id="u34_div" class=""></div>
        <div id="u34_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (直线 / 行距) -->
      <div id="u35" class="ax_default line-new">
        <img id="u35_img" class="img " src="{$this->root}img/equipmentBoard/u27.svg?v=$version">
        <div id="u35_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u36" class="ax_default box_1">
        <div id="u36_div" class=""></div>
        <div id="u36_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (表格) -->
      <div id="u37" class="ax_default">
        <p></p>
        <p><span style="text-decoration:none;">设备名称</span></p>
        <p><span style="text-decoration:none;">状态</span></p>
        <p><span style="text-decoration:none;">最近巡检</span></p>
        <p><span style="text-decoration:none;">最近保养</span></p>
      </div>

      <!-- Unnamed (动态面板) -->
      <div id="u44" class="ax_default" style="width: 510px; height: 408px;">
        {$equipmentMaintain}
      </div>

      <!-- Unnamed (组合) -->
      <div id="u191" class="ax_default" data-left="1340" data-top="241" data-width="190" data-height="190">
        <!-- Unnamed (动态面板) -->
        <div id="u193" class="ax_default">
            <div style='transition: 0.8s;' id='pieTextWeek'><p class='week-name'></p><p class='week-rate'></p></div>
            <div id="weekTurnoverHtml"></div>
        </div>
      </div>

      <!-- Unnamed (组合) -->
      <div id="u220" class="ax_default" data-left="1633" data-top="241" data-width="190" data-height="190">
        <!-- Unnamed (动态面板) -->
        <div id="u222" class="ax_default">
            <div style='transition: 0.8s;' id='pieTextMonth'><p class='month-name'></p><p class='month-rate'></p></div>
            <div id="monthTurnoverHtml"></div>
        </div>
      </div>

      <!-- Unnamed (图像) -->
      <div id="u273" class="ax_default _图片_">
        <div id="faultHtml"></div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u274" class="ax_default _三级标题">
        <div id="u274_div" class=""></div>
        <div id="u274_text" class="text ">
          <p><span style="text-decoration:none;">本周</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u275" class="ax_default _三级标题">
        <div id="u275_div" class=""></div>
        <div id="u275_text" class="text ">
          <p><span style="text-decoration:none;">本月</span></p>
        </div>
      </div>

      <!-- Unnamed (表格) -->
      <div id="u276" class="ax_default">
        <p></p>
        <p><span style="text-decoration:none;">模具名称</span></p>
        <p><span style="text-decoration:none;">状态</span></p>
        <p><span style="text-decoration:none;">额定寿命</span></p>
        <p><span style="text-decoration:none;">剩余寿命</span></p>
      </div>

      <!-- Unnamed (动态面板) -->
      <div id="u283" class="ax_default" style="width: 510px; height: 408px;">
        {$equipmentMould}
      </div>

      <!-- Unnamed (动态面板) -->
      <div id="u430" class="ax_default">
        {$equipmentRepair}
      </div>

      <!-- Unnamed (表格) -->
      <div id="u447" class="ax_default">
        <p><span style="text-decoration:none;">设备名称</span></p>
        <p><span style="text-decoration:none;">报修时间</span></p>
        <p><span style="text-decoration:none;">状态</span></p>
        <p><span style="text-decoration:none;">响应时间</span></p>
        <p><span style="text-decoration:none;">响应时长</span></p>
      </div>

      <!-- Unnamed (图像) -->
      <div id="u454" class="ax_default _图片_">
        <img id="u454_img" class="img " src="{$this->root}img/equipmentBoard/u454.gif?v=$version">
        <div id="u454_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>
    </div>
    <script src='{$this->root}static/javascript/echarts.min.js'></script>
    <script>
        
       $(document).ready(function(){
            //计时器
            var timer = null;
            timer = setTimeout(time, 1000);
            function time() {
                clearTimeout(timer);
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var wi = dt.getDay()
                var h = dt.getHours();
                var m = dt.getMinutes();
                var s = dt.getSeconds();
                const weeks = [ 'SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY']
                const fullTime =  [y, mt, day].map(formatNumber).join('-') + ' ' + [h, m, s].map(formatNumber).join(':') + ' ' + weeks[wi]
                document.getElementById("showTime").innerHTML = fullTime;
                timer = setTimeout(time, 1000);
            }
            const formatNumber = n => {
                n = n.toString()
                return n[1] ? n : '0' + n
            }
            //滚动方法
            var timerRool = []
            
            function roll(t,id1,id2,box,timer){
               var ul1 = document.getElementById(id1);
                var ul2 = document.getElementById(id2);
                var ulbox = document.getElementById(box);
                ul2.innerHTML = ul1.innerHTML;
                ulbox.scrollTop = 0;
                rollStart(t,id1,id2,box,timer);
            }
            function rollStart(t,id1,id2,box,timer){
               var ul1 = document.getElementById(id1);
                var ul2 = document.getElementById(id2);
                var ulbox = document.getElementById(box);
                rollStop(timer);
                timerRool[timer] = setInterval(()=>{
                    const radios = parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;//兼容到浏览器页面百分比缩小时也能自动滚动；
                    // 当滚动高度大于列表内容高度时恢复为0
                    if (ulbox.scrollTop >= ul1.scrollHeight) {
                        ulbox.scrollTop = 0;
                    } else {
                        ulbox.scrollTop = ulbox.scrollTop + radios;
                    }
                }, t);
            }
            function rollStop(timer){
               clearInterval(timerRool[timer]);
            }
            //设备保修
            roll(60,'comment1','comment2','repair_box','repair')
            $("#repair_box").mouseout(function(){
              rollStart(60,'comment1','comment2','repair_box','repair')
            });
            $("#repair_box").mouseover(function(){
              rollStop('repair')
            });
            //设备巡检
            roll(60,'comment3','comment4','maintain_box','maintain')
            $("#maintain_box").mouseout(function(){
              rollStart(60,'comment3','comment4','maintain_box','maintain')
            });
            $("#maintain_box").mouseover(function(){
              rollStop('maintain')
            });
            //模具寿命与状态
            roll(60,'comment5','comment6','mould_box','mould')
            $("#mould_box").mouseout(function(){
              rollStart(60,'comment5','comment6','mould_box','mould')
            });
            $("#mould_box").mouseover(function(){
              rollStop('mould')
            });
            
           
        })
        function search_line(form,cla,fun) {
            $("#" + fun + "Html").html("数据查询中，请稍后。。。");
            //串联表单
            var formName = form.split(",");
            var serialize = "";
            var a = "";
            for (var i = 0; i < formName.length; i++) {
                if (serialize == "") {
                    a = "";
                } else {
                    a = "&";
                }
                if (formName[i] != "") {
                    serialize += a + $("[name=" + formName[i] + "]").serialize();
                }
            }
            $.post(root + "control/adIndex.html?cla=" + cla + "&fun=" + fun, serialize, function (data) {
                 $("#" + fun + "Html").html(data.html);
            }, "json");
        }
        $(function() {
            search_line('mainForm','equipmentKanban', 'fault')
            $.post(root + "control/adIndex.html?cla=equipmentKanban&fun=weekTurnover", {page:1}, function (data) {
                if(data.warn == 2){
                    $("#pieTextWeek").find(".week-name").html(data.name);
                    $("#pieTextWeek").find(".week-rate").html(data.rate);
                    $("#weekTurnoverHtml").html(data.html);
                }
            }, "json");
            $.post(root + "control/adIndex.html?cla=equipmentKanban&fun=monthTurnover", {page:1}, function (data) {
                if(data.warn == 2){
                    $("#pieTextMonth").find(".month-name").html(data.name);
                    $("#pieTextMonth").find(".month-rate").html(data.rate);
                    $("#monthTurnoverHtml").html(data.html);
                }
            }, "json");
            setInterval(function(){
                setTimeout(function () {
                    //本周翻转
                    var id=document.getElementById("pieTextWeek");
                    var x = 2
                    $.post(root + "control/adIndex.html?cla=equipmentKanban&fun=weekTurnover", {page:x}, function (data) {
                        if(data.warn == 2){
                            x = data.nextPage
                            $("#pieTextWeek").find(".week-name").html(data.name);
                            $("#pieTextWeek").find(".week-rate").html(data.rate);
                            $("#weekTurnoverHtml").html(data.html);
                        }
                    }, "json");
                    //本月翻转
                    var id2=document.getElementById("pieTextMonth");
                    var y = 2
                    $.post(root + "control/adIndex.html?cla=equipmentKanban&fun=monthTurnover", {page:x}, function (data) {
                        if(data.warn == 2){
                            y = data.nextPage
                            $("#pieTextMonth").find(".month-name").html(data.name);
                            $("#pieTextMonth").find(".month-rate").html(data.rate);
                            $("#monthTurnoverHtml").html(data.html);
                        }
                    }, "json");
                }, 20000);
            }, 20000);
        })
        
    </script>
EOT;

        return head("ad") . $this->style() . $html . warn() . $this->adfooter();
    }
    /**
     * 设备故障分布 - 返回数据
     */
    public function fault(): bool|string
    {
        $equipment_repair = find(array(
            "table"=>"equipment_repair",
            "field"=>"type",
            "where"=>" coid = '".self::$coid."' and state <> '草稿' group by type "
        ));
        $total         = find([
                'table'  => "equipment_repair",
                'field'  => "IFNULL(count(id),0) as num",
                'single' => " coid = '".self::$coid."' and state <> '草稿' ",
            ])['num'] ?? 0;
        $res   = [];
        foreach ((array)$equipment_repair['array'] as $array){
            $num =  find([
                    'table'  => "equipment_repair",
                    'field'  => "IFNULL(count(id),0) as num",
                    'single' => " coid = '".self::$coid."' and state <> '草稿' and type = '$array[type]' ",
                ])['num'] ?? 0;
            $res[] = [
                'text'     => $array['type'],
                'num' => $num,
                'rate' => $total>0?round($num/$total*100,2):0,
            ];
        }
        $data = [
            "subtext" => '',
            "legendStyle" => "textStyle: {
				    color: '#7f7f7f'
				}",
            "name" => array_column($res,'text'),
            "series" => [
                [
                    'name' => '数量',
                    'type' => 'bar',
                    'smooth' => true,
                    'itemStyle' => json_encode(['color'=>'#5381dd'],320),
                    'data' => array_column($res,'num')
                ],
                [
                    'name' => '占比',
                    'type' => 'line',
                    'yAxisIndex' => 1,
                    'smooth' => true,
                    'itemStyle' => json_encode(['color'=>'#585e80'],320),
                    'data' => array_column($res,'rate')
                ]
            ]
        ];
        $qualityKanbanClass = new qualityKanbanClass();
        $json['html'] = $qualityKanbanClass->curveQuality($data);
        return json_encode($json, 320);
    }

    /**
     * 配件周转率-本周 - 返回数据
     */
    public function weekTurnover(): bool|string
    {
        $page = $this->post('page')?:1;
        $sqlFirst = ($page - 1) * 1;
        $parts = find(array(
            "table"=>"parts",
            "field"=>"id,name",
            "where"=>" coid = '".self::$coid."' and state = '启用' order by time desc limit {$sqlFirst},1 "
        ));
        $nextPage = $page+1;
        if(empty($parts['array'])){
            $parts = find(array(
                "table"=>"parts",
                "field"=>"id,name",
                "where"=>" coid = '".self::$coid."' and state = '启用' order by time desc limit 0,1 "
            ));
            $nextPage = 2;
        }

        $sdefaultDate = date("Y-m-d");
        $first = 1;
        $w = date('w',strtotime($sdefaultDate));
        $week_start = date('Y-m-d',strtotime("$sdefaultDate -".($w ? $w - $first : 6).' days'));
        $week_end = date('Y-m-d 23:59:59',strtotime("$week_start +6 days"));
        $json = ['warn'=>'空数据'];
        if(is_array($parts['array']) && !empty($parts['array'])) {
            $inventoryNum = partsClass::inventoryNum($parts['array'][0]['id']);
            $outNum = find([
                    'table' => "parts_inventory_record",
                    'field' => "IFNULL(sum(abs(num)),0) as num",
                    'single' => " coid = '" . self::$coid . "' and partsId = '{$parts['array'][0]['id']}' and num < 0 and time between '$week_start' and '$week_end' ",
                ])['num'] ?? 0;
            $proportion = $inventoryNum > 0 ? round($outNum / $inventoryNum * 100, 2) : 0;
            $proportion = $proportion > 100 ? 100 : $proportion;
            $other = 100 - $proportion;

            //金额占比
            $series = [
                ['name' => '', 'data' => $proportion],
                ['name' => '', 'data' => $other]
            ];
            $data = [
                "text" => '',
                "subtext" => '',
                "color" => ['#557cd1', '#464a65'],
                "series" => $series,
            ];
            $json['html'] = $this->pie($data);
            $json['name'] = $parts['array'][0]['name'];
            $json['rate'] = $proportion . '%';
            $json['nextPage'] = $nextPage;
            $json['warn'] = 2;
        }
        return json_encode($json, 320);
    }
    /**
     * 配件周转率-本月 - 返回数据
     */
    public function monthTurnover(): bool|string
    {
        $page = $this->post('page')?:1;
        $sqlFirst = ($page - 1) * 1;
        $parts = find(array(
            "table"=>"parts",
            "field"=>"id,name",
            "where"=>" coid = '".self::$coid."' and state = '启用' order by time desc limit {$sqlFirst},1 "
        ));
        $nextPage = $page+1;
        if(empty($parts['array'])){
            $parts = find(array(
                "table"=>"parts",
                "field"=>"id,name",
                "where"=>" coid = '".self::$coid."' and state = '启用' order by time desc limit 0,1 "
            ));
            $nextPage = 2;
        }

        $month_start = date('Y-m-01');
        $month_end = date('Y-m-'.date("t").' 23:59:59');
        $json = ['warn'=>'空数据'];
        if(is_array($parts['array']) && !empty($parts['array'])) {
            $inventoryNum = partsClass::inventoryNum($parts['array'][0]['id']); //配件库存
            $outNum = find([
                    'table' => "parts_inventory_record",
                    'field' => "IFNULL(sum(abs(num)),0) as num",
                    'single' => " coid = '" . self::$coid . "' and partsId = '{$parts['array'][0]['id']}' and num < 0 and time between '$month_start' and '$month_end' ",
                ])['num'] ?? 0;  //出库数量
            $proportion = $inventoryNum > 0 ? round($outNum / $inventoryNum * 100, 2) : 0;
            $proportion = $proportion > 100 ? 100 : $proportion;
            $other = 100 - $proportion;
            //金额占比
            $series = [
                ['name' => '', 'data' => $proportion],
                ['name' => '', 'data' => $other]
            ];
            $data = [
                "text" => '',
                "subtext" => '',
                "color" => ['#557cd1', '#464a65'],
                "series" => $series,
            ];
            $json['html'] = $this->pie($data);
            $json['name'] = $parts['array'][0]['name'];
            $json['rate'] = $proportion . '%';
            $json['nextPage'] = $nextPage;
            $json['warn'] = 2;
        }
        return json_encode($json, 320);
    }
    public function style(){
        return <<<EOT
        <style>
            body {
              margin:0px;
              background-color:rgba(242, 242, 242, 1);
              background-image:none;
              position:static;
              left:auto;
              width:1920px;
              margin-left:0;
              margin-right:0;
              text-align:left;
            }
            .form_sketch {
              border-color:transparent;
              background-color:transparent;
            }
            #base {
              position:absolute;
              z-index:0;
            }
            #u0_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1920px;
              height:1080px;
              background:inherit;
              background-color:rgba(27, 31, 51, 1);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u0 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1920px;
              height:1080px;
              display:flex;
            }
            #u0 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u0_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u1_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1920px;
              height:1080px;
            }
            #u1 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1920px;
              height:1080px;
              display:flex;
              opacity:0.1;
            }
            #u1 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u1_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u2_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:136px;
              height:38px;
            }
            #u2 {
              border-width:0px;
              position:absolute;
              left:974px;
              top:38px;
              width:136px;
              height:38px;
              display:flex;
            }
            #u2 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u2_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u3_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:128px;
              height:37px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Arial Normal', 'Arial';
              font-weight:400;
              font-style:normal;
              color:#F2F2F2;
            }
            #u3 {
              border-width:0px;
              position:absolute;
              left:846px;
              top:34px;
              width:128px;
              height:37px;
              display:flex;
              font-family:'Arial Normal', 'Arial';
              font-weight:400;
              font-style:normal;
              color:#F2F2F2;
            }
            #u3 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u3_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #ufull_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:30px;
              height:38px;
            }
            #ufull {
                border-width: 0px;
                position: absolute;
                left: 1404px;
                top: 34px;
                width: 136px;
                height: 38px;
                display: flex;
                z-index: 3;
            }
            #ufull_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u4_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:700px;
              height:527px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u4 {
              border-width:0px;
              position:absolute;
              left:610px;
              top:121px;
              width:700px;
              height:527px;
              display:flex;
              opacity:0.9;
            }
            #u4 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u4_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u5_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:64px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u5 {
              border-width:0px;
              position:absolute;
              left:630px;
              top:141px;
              width:64px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u5 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u5_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u6_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:558px;
              height:372px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u6 {
              border-width:0px;
              position:absolute;
              left:42px;
              top:121px;
              width:558px;
              height:372px;
              display:flex;
              opacity:0.9;
            }
            #u6 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u6_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u7_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:64px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u7 {
              border-width:0px;
              position:absolute;
              left:62px;
              top:141px;
              width:64px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u7 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u7_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u8_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:558px;
              height:557px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u8 {
              border-width:0px;
              position:absolute;
              left:42px;
              top:503px;
              width:558px;
              height:557px;
              display:flex;
              opacity:0.9;
            }
            #u8 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u8_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u9_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:96px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u9 {
              border-width:0px;
              position:absolute;
              left:62px;
              top:523px;
              width:96px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u9 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u9_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u10_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:700px;
              height:402px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u10 {
              border-width:0px;
              position:absolute;
              left:610px;
              top:658px;
              width:700px;
              height:402px;
              display:flex;
              opacity:0.9;
            }
            #u10 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u10_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u11_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:96px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u11 {
              border-width:0px;
              position:absolute;
              left:630px;
              top:678px;
              width:96px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u11 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u11_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u12_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:558px;
              height:372px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u12 {
              border-width:0px;
              position:absolute;
              left:1320px;
              top:121px;
              width:558px;
              height:372px;
              display:flex;
              opacity:0.9;
            }
            #u12 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u12_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u13_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:80px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u13 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:141px;
              width:80px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u13 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u13_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u14_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:558px;
              height:557px;
              background:inherit;
              background-color:rgba(44, 48, 64, 0.8);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u14 {
              border-width:0px;
              position:absolute;
              left:1320px;
              top:503px;
              width:558px;
              height:557px;
              display:flex;
              opacity:0.9;
            }
            #u14 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u14_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u15_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:112px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u15 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:523px;
              width:112px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u15 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u15_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u16_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:740px;
              height:46px;
            }
            #u16 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:30px;
              width:740px;
              height:46px;
              display:flex;
            }
            #u16 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u16_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u17_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:2px;
              height:96px;
            }
            #u17 {
              border-width:0px;
              position:absolute;
              left:750px;
              top:-3px;
              width:1px;
              height:95px;
              display:flex;
              -webkit-transform:rotate(33.8626871220304deg);
              -moz-transform:rotate(33.8626871220304deg);
              -ms-transform:rotate(33.8626871220304deg);
              transform:rotate(33.8626871220304deg);
            }
            #u17 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u17_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u18_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:738px;
              height:46px;
            }
            #u18 {
              border-width:0px;
              position:absolute;
              left:1180px;
              top:30px;
              width:738px;
              height:46px;
              display:flex;
            }
            #u18 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u18_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u19_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:2px;
              height:96px;
            }
            #u19 {
              border-width:0px;
              position:absolute;
              left:1169px;
              top:-3px;
              width:1px;
              height:95px;
              display:flex;
              -webkit-transform:rotate(326.13731287797deg);
              -moz-transform:rotate(326.13731287797deg);
              -ms-transform:rotate(326.13731287797deg);
              transform:rotate(326.13731287797deg);
            }
            #u19 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u19_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u20 {
              position:absolute;
              left:1574px;
              top:45px;
            }
            #u20_state0 {
              position:relative;
              left:0px;
              top:0px;
              width:109px;
              height:17px;
              background-image:none;
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u20_state0_content {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1px;
              height:1px;
            }
            #u21_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:103px;
              height:16px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:14px;
              letter-spacing:1px;
              color:#F2F2F2;
            }
            #u21 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:103px;
              height:16px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:14px;
              letter-spacing:1px;
              color:#F2F2F2;
            }
            #u21 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u21_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u20_state1 {
              position:relative;
              left:0px;
              top:0px;
              width:109px;
              height:17px;
              background-image:none;
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              visibility:hidden;
            }
            #u20_state1_content {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1px;
              height:1px;
            }
            #u22_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:103px;
              height:16px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:14px;
              letter-spacing:1px;
              color:#F2F2F2;
            }
            #u22 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:103px;
              height:16px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:14px;
              letter-spacing:1px;
              color:#F2F2F2;
            }
            #u22 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u22_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u23_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:2px;
              height:108px;
            }
            #u23 {
              border-width:0px;
              position:absolute;
              left:1154px;
              top:-9px;
              width:1px;
              height:107px;
              display:flex;
              -webkit-transform:rotate(326.13731287797deg);
              -moz-transform:rotate(326.13731287797deg);
              -ms-transform:rotate(326.13731287797deg);
              transform:rotate(326.13731287797deg);
            }
            #u23 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u23_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u24_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:735px;
              height:2px;
            }
            #u24 {
              border-width:0px;
              position:absolute;
              left:1184px;
              top:88px;
              width:734px;
              height:1px;
              display:flex;
            }
            #u24 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u24_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u25_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:735px;
              height:2px;
            }
            #u25 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:88px;
              width:734px;
              height:1px;
              display:flex;
            }
            #u25 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u25_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u26_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:2px;
              height:108px;
            }
            #u26 {
              border-width:0px;
              position:absolute;
              left:763px;
              top:-9px;
              width:1px;
              height:107px;
              display:flex;
              -webkit-transform:rotate(33.8626871220304deg);
              -moz-transform:rotate(33.8626871220304deg);
              -ms-transform:rotate(33.8626871220304deg);
              transform:rotate(33.8626871220304deg);
            }
            #u26 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u26_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u27_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:411px;
              height:2px;
            }
            #u27 {
              border-width:0px;
              position:absolute;
              left:162px;
              top:184px;
              width:410px;
              height:1px;
              display:flex;
            }
            #u27 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u27_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u28_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:100px;
              height:12px;
              background:inherit;
              background-color:rgba(91, 143, 249, 0.498039215686275);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u28 {
              border-width:0px;
              position:absolute;
              left:62px;
              top:178px;
              width:100px;
              height:12px;
              display:flex;
            }
            #u28 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u28_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u29_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:411px;
              height:2px;
            }
            #u29 {
              border-width:0px;
              position:absolute;
              left:162px;
              top:566px;
              width:410px;
              height:1px;
              display:flex;
            }
            #u29 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u29_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u30_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:100px;
              height:12px;
              background:inherit;
              background-color:rgba(91, 143, 249, 0.498039215686275);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u30 {
              border-width:0px;
              position:absolute;
              left:62px;
              top:560px;
              width:100px;
              height:12px;
              display:flex;
            }
            #u30 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u30_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u31_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:553px;
              height:2px;
            }
            #u31 {
              border-width:0px;
              position:absolute;
              left:730px;
              top:721px;
              width:552px;
              height:1px;
              display:flex;
            }
            #u31 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u31_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u32_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:100px;
              height:12px;
              background:inherit;
              background-color:rgba(91, 143, 249, 0.498039215686275);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u32 {
              border-width:0px;
              position:absolute;
              left:630px;
              top:715px;
              width:100px;
              height:12px;
              display:flex;
            }
            #u32 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u32_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u33_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:411px;
              height:2px;
            }
            #u33 {
              border-width:0px;
              position:absolute;
              left:1440px;
              top:184px;
              width:410px;
              height:1px;
              display:flex;
            }
            #u33 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u33_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u34_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:100px;
              height:12px;
              background:inherit;
              background-color:rgba(91, 143, 249, 0.498039215686275);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u34 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:178px;
              width:100px;
              height:12px;
              display:flex;
            }
            #u34 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u34_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u35_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:411px;
              height:2px;
            }
            #u35 {
              border-width:0px;
              position:absolute;
              left:1440px;
              top:566px;
              width:410px;
              height:1px;
              display:flex;
            }
            #u35 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u35_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            #u36_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:100px;
              height:12px;
              background:inherit;
              background-color:rgba(91, 143, 249, 0.498039215686275);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u36 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:560px;
              width:100px;
              height:12px;
              display:flex;
            }
            #u36 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u36_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            /*****设备巡检保养****/
            #maintain_box{
                width: 510px;
                height: 408px;
                overflow: hidden;
            }
            #maintain_box li{
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                height: 35px;
                line-height: 35px;
            }
            #u37 {
                border-width:0px;
                position:absolute;
                left:62px;
                top:602px;
                width:510px;
                height:22px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                background-color: #464a65;
            }
            #maintain_box li:nth-child(2n-1){
                background-color: #464a65;
            }
            #maintain_box li p:nth-child(3),#maintain_box li p:nth-child(4),#maintain_box li p:nth-child(5){
                color: #5b8ff9;
            }
            #u37 p:nth-child(1), #maintain_box li p:nth-child(1){
                width: 10%;
                text-align: center;
            }
            #u37 p:nth-child(2), #maintain_box li p:nth-child(2){
                width: 40%;
                text-align: center;
            }
            #u37 p:nth-child(3), #maintain_box li p:nth-child(3){
                width: 15%;
                text-align: center;
            }
            #u37 p:nth-child(4), #maintain_box li p:nth-child(4){
                width: 20%;
                text-align: center;
            }
            #u37 p:nth-child(5), #maintain_box li p:nth-child(5){
                width: 20%;
                text-align: center;
            }
            
            #u44 {
              position:absolute;
              left:62px;
              top:624px;
            }
       
       
            #u191 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:0px;
              height:0px;
            }
            #u193 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:241px;
              width:190px;
              height:190px;
            }
            #weekTurnoverHtml {
              width:190px;
              height:190px;
              position: relative;
            }
            #pieTextWeek{
                color: #fff;
                position: absolute;
                left: 52px;
                top: 95px;
            }
            #pieTextWeek p:nth-child(1){
                font-size: 16px;
                text-align: center;
                width: 87px;
                overflow: hidden;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            
            #pieTextWeek p:nth-child(2){
                text-align: center;
                width: 87px;
            }
            
            #u220 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:0px;
              height:0px;
            }
            #u222 {
              border-width:0px;
              position:absolute;
              left:1633px;
              top:241px;
              width:190px;
              height:190px;
            }
            #monthTurnoverHtml {
              width:190px;
              height:190px;
              position: relative;
            }
            #pieTextMonth{
                color: #fff;
                position: absolute;
                left: 52px;
                top: 95px;
            }
            #pieTextMonth p:nth-child(1){
                font-size: 16px;
                text-align: center;
                width: 87px;
                overflow: hidden;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            
            #pieTextMonth p:nth-child(2){
                text-align: center;
                width: 87px;
            }
           
            #u273 {
              border-width:0px;
              position:absolute;
              left:630px;
              top:748px;
              width:620px;
              height:270px;
              display:flex;
            }
            #faultHtml {
              width:620px;
              height:270px;
            }
            #u274_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:32px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u274 {
              border-width:0px;
              position:absolute;
              left:1340px;
              top:220px;
              width:32px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u274 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u274_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            #u275_div {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:32px;
              height:19px;
              background:inherit;
              background-color:rgba(255, 255, 255, 0);
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u275 {
              border-width:0px;
              position:absolute;
              left:1633px;
              top:220px;
              width:32px;
              height:19px;
              display:flex;
              font-family:'Lato';
              font-weight:400;
              font-style:normal;
              font-size:16px;
              color:#F2F2F2;
            }
            #u275 .text {
              position:absolute;
              align-self:flex-start;
              padding:0px 0px 0px 0px;
              box-sizing:border-box;
              width:100%;
            }
            #u275_text {
              border-width:0px;
              white-space:nowrap;
              text-transform:none;
            }
            /*****模具寿命与状态****/
            #u283 {
              position:absolute;
              left:1340px;
              top:624px;
            }
            #mould_box{
                width: 510px;
                height: 408px;
                overflow: hidden;
            }
            #mould_box li{
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                height: 35px;
                line-height: 35px;
            }
            #u276 {
                border-width:0px;
                position:absolute;
                left:1340px;
                top:602px;
                width:510px;
                height:22px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                background-color: #464a65;
            }
            
            #mould_box li:nth-child(2n-1){
                background-color: #464a65;
            }
            #mould_box li p:nth-child(3),#mould_box li p:nth-child(4),#mould_box li p:nth-child(5){
                color: #5b8ff9;
            }
            #u276 p:nth-child(1), #mould_box li p:nth-child(1){
                width: 10%;
                text-align: center;
            }
            #u276 p:nth-child(2), #mould_box li p:nth-child(2){
                width: 40%;
                text-align: center;
            }
            #u276 p:nth-child(3), #mould_box li p:nth-child(3){
                width: 15%;
                text-align: center;
            }
            #u276 p:nth-child(4), #mould_box li p:nth-child(4){
                width: 20%;
                text-align: center;
            }
            #u276 p:nth-child(5), #mould_box li p:nth-child(5){
                width: 20%;
                text-align: center;
            }
          
            #u430 {
              border-width:0px;
              position:absolute;
              left:62px;
              top:240px;
              width:510px;
              height:221px;
            }
            #u430_state0 {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:510px;
              height:221px;
              -ms-overflow-x:hidden;
              overflow-x:hidden;
              -ms-overflow-y:hidden;
              overflow-y:hidden;
              background-image:none;
              border:none;
              border-radius:0px;
              -moz-box-shadow:none;
              -webkit-box-shadow:none;
              box-shadow:none;
            }
            #u430_state0_content {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:1px;
              height:1px;
            }
            /*****设备报修*****/
            #repair_box{
                width: 510px;
                height: 221px;
                overflow: hidden;
            }
            #repair_box li{
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                margin: 15px 0;
            }
            .duration {
                display: inline-block;
                background-color: rgba(91, 143, 249, 1);
                border: none;
                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                height: 8px;
            }
            #u447 {
                border-width:0px;
                position:absolute;
                left:62px;
                top:218px;
                width:510px;
                height:22px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                background-color: #464a65;
            }
            #repair_box li p:nth-child(5){
                width: 30%;
                text-align: left;
            }
            #u447 p:nth-child(1),#repair_box li p:nth-child(1){
                width: 30%;
                text-align: center;
            }
            #u447 p:nth-child(2),#repair_box li p:nth-child(2){
                width: 13%;
                text-align: center;
            }
            #u447 p:nth-child(3),#repair_box li p:nth-child(3){
                width: 13%;
                text-align: center;
            }
            #u447 p:nth-child(4),#repair_box li p:nth-child(4){
                width: 13%;
                text-align: center;
            }
            #u447 p:nth-child(5){
                width: 30%;
                text-align: center;
            }
            
            
            #u454_img {
              border-width:0px;
              position:absolute;
              left:0px;
              top:0px;
              width:660px;
              height:440px;
            }
            #u454 {
              border-width:0px;
              position:absolute;
              left:630px;
              top:185px;
              width:660px;
              height:440px;
              display:flex;
            }
            #u454 .text {
              position:absolute;
              align-self:center;
              padding:2px 2px 2px 2px;
              box-sizing:border-box;
              width:100%;
            }
            #u454_text {
              border-width:0px;
              word-wrap:break-word;
              text-transform:none;
              visibility:hidden;
            }
            
            #u3 p{
                font-size: 32px!important;
                line-height: 37px!important;
            }
            ._三级标题 p{
                font-size: 16px!important;
            }
            
           
    </style>
EOT;
    }
    /**
     * 饼图模板
     *
     * @param array $data 格式如上
     */
    public function pie($data)
    {
        $series = $legend = '';
        foreach ($data['series'] as $key => $array) {
            $legend .= "'{$array['name']}',";
            $value  = (is_array($array['data']) ? $array['data'][0] : $array['data']);
            $series .= '{value:"' . $value . '", name: "' . $array['name'] . '"},';
        }
        $color = "";
        if(isset($data['color'])){
            $color .= "color:[";
            foreach ($data['color'] as $v){
                $color .= "'{$v}',";
            }
            $color .= "],";
        }
        $option = <<<EOT
        var option = {
            legend: {
                data: [{$legend}]
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                left: 'center',
                top: '5%',
            },
            title: {
                text: '{$data['text']}',
                subtext: '{$data['subtext']}',
                textStyle:{
                    color: '#fff'
                },
                subtextStyle:{
                    color: '#fff'
                },
                left: 'center',
                top: '55%'
            },
            {$color}
            series: [
                {
                    name: '',
                    type: 'pie',
                    radius: ['55%', '75%'],
                    center: ['50%', '60%'],
                    labelLine: {
                        length: '5%',
                    },
                    label: {
                        show: false,
                        // formatter: '{b}：{c}',
                    },
                    data: [{$series}]
                }
            ]
        };
EOT;
        //返回
        return $this->echartsPie($option);
    }
    /**
     * echarts模板
     *
     * @param string $option
     * @param string $ext 扩展js
     * @return string
     */
    public function echartsPie($option, $ext = null): string
    {
        $id = suiji();
        return "
		<div id='" . $id . "' style='width:100%;height:100%;'></div>
        $ext
		<script type='text/javascript'>
			//基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('" . $id . "'),'walden');
			//指定图表的配置项和数据
			" . $option . "
			//使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
			myChart.dispatchAction({
			    type:'highlight',
			    seriesIndex:0,
			    dataIndex:0,
			});
		</script>
		";
    }

}
